<template>
  <div class="app-container">
    <!--工具栏-->
    <div
      v-if="crud.props.searchToggle"
      class="crud-group"
    >
      <!-- 搜索 -->
      <el-input
        v-model="query.type"
        clearable
        size="small"
        placeholder="功能分类"
        style="width:200px"
        class="filter-item"
      />
      <el-input
        v-model="query.scriptPackName"
        clearable
        size="small"
        placeholder="操作人"
        style="width:200px"
        class="filter-item"
      />
      <rrOperation :crud="crud" />
    </div>
    <crudOperation :permission="permission" />
    <!--表格渲染-->
    <el-table
      ref="table"
      v-loading="crud.loading"
      :data="tableData"
      @select="crud.selectChange"
      @select-all="crud.selectAllChange"
      @selection-change="crud.selectionChangeHandler"
    >
      <el-table-column
        type="selection"
        width="55"
      />
      <el-table-column
        v-if="columns.visible('type')"
        label="功能分类"
        prop="type"
      />
      <!-- <el-table-column
        v-if="columns.visible('status')"
        label="状态"
        prop="status"
      >
        <template slot-scope="scope">
          <el-tag
            v-if="scope.row.status==='SCANNING'"
            size="small"
          >检测中</el-tag>
          <el-tag
            v-if="scope.row.status==='SCANFINISH'"
            size="small"
            type="success"
          >检测完成</el-tag>
          <el-tag
            v-if="scope.row.status==='FAIL'"
            size="small"
            type="danger"
          >失败</el-tag>
        </template>
      </el-table-column> -->
      <el-table-column
        v-if="columns.visible('rules')"
        label="检测规则"
        prop="rules"
      />
      <el-table-column
        v-if="columns.visible('interval')"
        label="检测间隔"
        prop="interval"
      />
      <el-table-column
        v-if="columns.visible('user')"
        label="操作人"
        prop="user"
      />
      <el-table-column
        v-if="columns.visible('createTime')"
        sortable
        label="操作时间"
        prop="createTime"
        width="140px"
      />
      <el-table-column label="查看详情">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
          >查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <!--分页组件-->
      <pagination />
    </div>
    <!--表单渲染-->
  </div>
</template>

<script>
import CRUD, { crud, form, header, presenter } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/extend/script/pack/CRUD.operation'
import pagination from '@crud/Pagination'
// crud交由presenter持有
const defaultCrud = CRUD({ title: '', url: '', crudMethod: {  }})
const defaultForm = {
  
}
export default {
  name: 'ScriptPack',
  components: { crudOperation, rrOperation, pagination, },
  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
  data() {
    return {
      tableData:[
        {
            type:"功能",
            status:"SCANNING",
            rules:"脚本是否支持重跑",
            interval:"周期",
            user:"admin",
            createTime:"2024-05-21 13:53:24",
        },
        {
            type:"隐患",
            status:"SCANFINISH",
            rules:"禁止使用SELECT *",
            interval:"周期",
            user:"admin",
            createTime:"2024-05-20 15:53:24",
        },
        {
            type:"隐患",
            status:"SCANFINISH",
            rules:"脚本生成的依赖和配置的依赖检查",
            interval:"周期",
            user:"admin",
            createTime:"2024-05-20 10:53:24",
        },
        {
            type:"隐患",
            status:"SCANFINISH",
            rules:"查询元数据库内是否含本次创建表",
            interval:"初始化",
            user:"admin",
            createTime:"2024-05-20 08:53:24",
        },
        {
            type:"功能",
            status:"SCANFINISH",
            rules:"代码中出现日期写死情况检查统计",
            interval:"周期",
            user:"admin",
            createTime:"2024-05-19 17:53:24",
        },
        {
            type:"功能",
            status:"FAIL",
            rules:"脚本中不允许出现SIT库、UAT库",
            interval:"周期",
            user:"admin",
            createTime:"2024-05-19 12:53:24",
        },
        {
            type:"隐患",
            status:"SCANFINISH",
            rules:"程序尾部是否做了元数据刷新操作",
            interval:"周期",
            user:"admin",
            createTime:"2024-05-19 10:53:24",
        },
        {
            type:"功能",
            status:"SCANFINISH",
            rules:"脚本是否支持重跑",
            interval:"周期",
            user:"admin",
            createTime:"2024-05-18 15:53:24",
        },
        {
            type:"功能",
            status:"SCANFINISH",
            rules:"代码中出现日期写死情况检查统计",
            interval:"周期",
            user:"admin",
            createTime:"2024-05-18 14:53:24",
        },
        {
            type:"功能",
            status:"SCANFINISH",
            rules:"脚本是否支持重跑",
            interval:"周期",
            user:"admin",
            createTime:"2024-05-18 11:53:24",
        },
        {
            type:"隐患",
            status:"SCANFINISH",
            rules:"查询元数据库内是否含本次创建表",
            interval:"初始化",
            user:"admin",
            createTime:"2024-05-17 14:53:24",
        },
        {
            type:"隐患",
            status:"SCANFINISH",
            rules:"程序尾部是否做了元数据刷新操作",
            interval:"周期",
            user:"admin",
            createTime:"2024-05-17 09:53:24",
        },
        {
            type:"隐患",
            status:"SCANFINISH",
            rules:"程序尾部是否做了元数据刷新操作",
            interval:"周期",
            user:"admin",
            createTime:"2024-05-16 18:53:24",
        },
      ],
      permission: {
        add: ['admin', 'scriptPack:add'],
        del: ['admin', 'scriptPack:del']
      },
    }
  },
  created() {
    
  },
  methods: {
    
  }
}
</script>
<style scoped>
.assist {
  min-height: 46px;
  color: #fff;
  background-color: #ff4949;
  border-color: #ff4949;
}
</style>
